<template>
  <div class="mains">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" class="base1" />
    <!-- 柱状图 -->
    <div class="base2">
      <componen :order-data="dates" />
    </div>

    <!-- 初始数字滚动 -->
    <div class="count">
      <count />
    </div>
    <!-- 字符云 -->
    <div class="zifu">
      <ziFuClound />
    </div>
    <!-- 地图 -->
    <div class="mapchart">
      <mapChart />
    </div>
    <!-- 饼图 -->
    <div class="pieClound">
      <pieCloud />
    </div>
    <h2>{{ dataTime }}</h2>
  </div>
</template>

<script>
// import { clearUserCache } from '@/utils/myAuth'
import { parseTime } from '@/utils/index'
import mapChart from './components/chinaMap.vue'
import pieCloud from './components/pieChart.vue'
import ziFuClound from './components/zfCloud.vue'
import count from './components/count.vue'
import componen from './components'
import { date } from './data'
// var echarts = require('echarts')
import * as echarts from 'echarts'
export default {
  components: {
    componen,
    count,
    ziFuClound,
    pieCloud,
    mapChart
  },
  data() {
    return {
      dates: date(),
      dataTime: ''
    }
  },
  computed: {
  },
  created() {
    setInterval(() => {
      // this.dataTime = new Date().toLocaleTimeString()
      this.dataTime = parseTime(new Date())
    }, 1000)
  },
  mounted() {
    this.init()
  },
  methods: {
    // haha() {
    //   location.reload()
    //   clearUserCache()
    //   this.$router.push(`/login`)
    // },
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // var myChart = echarts.init(document.getElementById('main'))
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量'],
          right: 30
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisLabel: {
            // x字体旋转角度
            rotate: 30
          }
        },
        yAxis: {

        },
        series: [
          {
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .mains{
    background-color: #0a1631;
    margin: 0 auto;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
    justify-content: space-around;
    flex-direction: row;
    .base1{
      width: 260px;
      height: 240px;
      margin: 10px;
      margin-left: 30px;
      // background-color: #CDC0B0;
      margin-right: 40px;
    }
    .base2{
      width: 600px;
      height: 340px;
      margin: 10px;
      // background-color: #D5D5D5;
    }
    .count{
    font-size: 34px;
    color: #fff;
  }
  .zifu{
    width: 400px;
    height: 400px;
    // background: #fff;
  }
  .pieClound{
    width: 650px;
    height: 400px;
  }
  .mapchart{
    width: 500px;
    height: 400px;
  }
  }

</style>
